import React from 'react'
import { message, Modal,Button} from 'antd'

import Table from '../../components/Table'
import 'whatwg-fetch'
import API from '../../axios/api'
import {EncryptionCode} from "../../utils/utils";
import {DATATATUS} from "../../utils/system-data";
import {
    FormModal
} from '../../components/ModalForm'
import {withRouter} from "react-router-dom";
import {inject, observer} from "mobx-react";
require('es6-promise').polyfill();

const confirm = Modal.confirm

let columns = [
    { dataIndex: '', title: '序号', width: 60,render: (v,k,index) => <span>{index + 1}</span>},
    { dataIndex: 'AppName', title: '小程序名称', width: 150,},
    { dataIndex: 'AppId', width: 220, title: '小程序AppId',},
    { dataIndex: 'AppSecret', width: 240, title: '小程序密匙', render: (text) => EncryptionCode(text) },
    { dataIndex: 'CallbackUrl', title: 'CallbackUrl',},
]

@withRouter @inject('appStore') @observer
export default class RudderApp extends React.Component {
    constructor(props) {
        super(props)
        const {user, rudder, rudderList} = props.appStore
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
            Page: 1,
            Pages:1,
            rudderList:rudderList
        }
    }

    onPageChange = (e) =>{
        this.setState({
            Page:e,
        },()=>{
            this.fetchTableData()
        })
    }

    // 获取表格数据
    fetchTableData =  async () => {
        let parms = {
            Page:this.state.Page,
            PageSize: 10,
        }
        await API.fetchRudderAppPages(parms).then((res) => {
            if(res.Code === 200) {
                this.setState({
                    tData: res.Data.List,
                    Pages:res.Data.Pages
                });
            }
            this.setState({
                loading: false
            });
        })
    }
    fieldsedit = () => {
        let that = this;
        let fields = [
            {
                label: '分舵',
                type: 'select',
                name: 'RudderId',
                items: () => that.state.rudderList,
                options: {
                    rules: [{
                        required: true,
                        message: '必选!',
                    }]
                }
            },
            { label: '小程序名称', type: 'input', name: 'AppName',
                options: {
                    rules: [
                        { required: true, message: '小程序名称必填!',}
                    ],
                }
            },
            { label: '小程序AppId', type: 'input', name: 'AppId',
                options: {
                    rules: [
                        { required: false, message: '纬度必填!',}
                    ],

                }
            },
            { label: '小程序密匙', type: 'input', name: 'AppSecret',
                options: {
                    rules: [
                        { required: false, message: '经度必填!',}
                    ],

                }
            },

            { label: 'CallbackUrl', type: 'input', name: 'CallbackUrl',
            options: {
                rules: [
                    { required: false, message: '经度必填!',}
                ],

            }
        }
     
        ]
        return fields
    }

    onEditOk = (param) =>{
        API.addRudderApp(param).then(res =>{
            if(res.Code === 200)
            {
                message.success('添加成功')
                this.onCancel()
                this.fetchTableData()
            }
            else message.error(res.Message)
        })
    }

    componentDidMount() {
        this.fetchTableData()
    }

    tableAction = (actionKey, item) => {
        if (actionKey === 'delete') {
            confirm({
                title: '提示',
                content: '确定删除吗',
                onOk: () => {
                    this.handerDel(item, DATATATUS.DELETE).then(res => {
                        if(res.Code === 200) {
                            message.success('删除成功')
                            this.fetchTableData()
                        }
                        else message.error(res.Message)
                    })
                },
                onCancel() {}
            })
        }else if( actionKey === 'edit'){
            console.log(item)
            this.setState({
                item:item
            })
        }
    }

    onCancel = () =>{
        this.setState({
            modalShowEdit:false
        })
    }


    handerDel(item, status){
        return API.delRudderApp({Id: item.Id, Status: status})
    }

    add = () =>{
        //RudderId
        this.setState({
            modalShowEdit:true
        })
    }

    render() {
        return (
            
            <div id="wrap">
            <div style={{ paddingTop: 10 }}>
                <Button  type="primary" onClick={this.add}>添加</Button>
            </div>
                <div className="tableBox">
                    <div style={{ paddingTop: 10 }}>
                        <Table
                            onCtrlClick={ this.tableAction }
                            pagination={ true }
                            pageSize={10}
                            header={ columns }
                            data={ this.state.tData }
                            loading={ this.state.loading }
                            // action={row => [
                            //     { key: 'delete', name: '删除', color: 'blue', icon: 'delete'},
                            //     { key: 'edit', name: '修改信息', color: 'blue', icon: 'edit'},
                            // ]}
                            scroll={{y: 385, x: 1200 }}
                            total={this.state.Pages}
                            onChange={this.onPageChange}
                            currentPage={this.state.Page}
                        />
                    </div>
                </div>

                     {/**编辑班级 */}
                     <FormModal
                        modalKey="edit"
                        visible={this.state.modalShowEdit}
                        title="修改"
                        fields={this.fieldsedit()}
                        onOk={this.onEditOk}
                        onCancel={this.onCancel}
                        okText="保存"
                        custom="a"
                    />
            </div>
        )
    }
}
